<script setup lang="ts">
import ThreeItem from '@/components/ThreeItem.vue'
import FourItem from '@/components/FourItem.vue'
import InfraredItem from '@/components/InfraredItem.vue'
import { reactive } from 'vue'

// props
const props = defineProps({
  position: {
    type: Number,
    default: 0
  }
})

const gasData = reactive({
  name: '4号出口'
})
</script>

<template>
  <div class="tran-main-box">
    <!-- <div class="border-box1" /> -->
    <!-- <div class="border-box2" /> -->
    <div class="item1 magrtin-top">
      <ThreeItem
        :data-id="31"
        :posi="props.position"
      />
    </div>
    <div class="item2 magrtin-top">
      <FourItem
        :data-id="41"
        :posi="props.position"
      />
    </div>
    <div class="item3">
      <InfraredItem />
    </div>
    <div class="item4 magrtin-top">
      <ThreeItem
        :data-id="32"
        :posi="props.position"
      />
    </div>
    <div class="item5 magrtin-top">
      <FourItem
        :data-id="42"
        :posi="props.position"
      />
    </div>
    <div class="item6 magrtin-top">
      <ThreeItem
        :data-id="33"
        :posi="props.position"
      />
    </div>
    <div class="item7">
      <InfraredItem />
    </div>
    <div class="item8 magrtin-top">
      <FourItem
        :data-id="43"
        :posi="props.position"
      />
    </div>
    <div class="item9 magrtin-top">
      <ThreeItem
        :data-id="34"
        :posi="props.position"
      />
    </div>
    <div class="item1 magrtin-top">
      <FourItem :data-id="44" />
    </div>
    <div class="item11">
      <InfraredItem />
    </div>
    <div class="item12 magrtin-top">
      <ThreeItem
        :data-id="35"
        :posi="props.position"
      />
    </div>
    <div class="item13 magrtin-top">
      <FourItem
        :data-id="45"
        :posi="props.position"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.tran-main-box {
  display: flex;

  /* width: 1576px;
      height: 70px; */
  width: 82.08vw;
  height: 8vh;
  background-image: url('../assets/bckImg/borderbgImg.png');
  background-repeat: no-repeat;
  background-position: 0 3vh;
  background-size: 81.88vw 2.1vh;
  .magrtin-top {
    margin-top: 1.8vh;
  }
  .item1 {
    /* margin-left: 22px; */
    margin-left: 1.15vw;
  }
  .item2 {
    /* margin-left: 40px; */
    margin-left: 2.08vw;
  }
  .item3 {
    /* margin-left: 16px; */
    margin-left: 0.83vw;
  }
  .item4 {
    /* margin-left: 16px; */
    margin-left: 0.83vw;
  }
  .item5 {
    /* margin-left: 40px; */
    margin-left: 2.03vw;
  }
  .item6 {
    /* margin-left: 40px; */
    margin-left: 2.03vw;
  }
  .item7 {
    /* margin-left: 16px; */
    margin-left: 0.83vw;
  }
  .item8 {
    /* margin-left: 16px; */
    margin-left: 0.83vw;
  }
  .item9 {
    /* margin-left: 40px; */
    margin-left: 2.03vw;
  }
  .item10 {
    /* margin-left: 40px; */
    margin-left: 2.03vw;
  }
  .item11 {
    /* margin-left: 16px; */
    margin-left: 0.83vw;
  }
  .item12 {
    /* margin-left: 16px; */
    margin-left: 0.83vw;
  }
  .item13 {
    /* margin-left: 40px; */
    margin-left: 2.03vw;
  }

  /* .border-box1,.border-box2 {
      position: absolute;
      top: 451px;
      z-index: 1;
      width: 1572px;
      height: 0;
      border-top: 20px solid rgb(98 123 155);
      border-radius: 0;
      opacity: 0.3;
    }
    .border-box2 {
      top: 740px;
    } */
}</style>